<template>
  <div class="LayOut">
    <router-link v-for="(items) in lab" :key="items.id" :to="items.path">
      {{items.names}}
    </router-link>
  </div>
</template>

<script>
export default {
    name:"LayOut",
    data() {
      return {
        lab:[
        {id:10085,names:'面经',path: "/article"},
        {id:10086,names:'收藏',path: "/collect"},
        {id:10087,names:'喜欢',path: "/Likes" },
        {id:10088,names:'我的',path: "/Mypage"}
      ]
      }
    },
}
</script>

<style scoped>
  .LayOut{
    position: fixed;
    display: flex;
    width: 400px;
    flex-direction: row;
    justify-content: space-around;
  }
  .LayOut>div{
    padding: 5px 15px;
  }
  .ActiveView{
    color: white;
    font-weight: 800;
    background-color:#3FDFFF;
  }
  a{
    text-decoration: none;
    color: black;
    width: 140px;
    height: 40px;
    line-height:40px;
    transition: all .5s ease-in-out;
    text-align: center;
   border-radius: 5px;
  }
  a:hover{
    background-color:#3FDFFF;
  }
</style>